<template>
  <div class="page-menu">
    <template v-for="item in menuConfig.menuList" :key="item.text">
      <el-badge is-dot class="item" :hidden="!item.badge">
        <button
          :class="['hs-btn', menuConfig.active === item.sign && 'isActive']"
          @click="handleBtnClick(item.sign)"
        >
          {{ item.text }}
        </button>
      </el-badge>
    </template>
  </div>
</template>

<script setup lang="ts">
import { Menu } from './types'

// 定义 props
defineProps<{
  menuConfig: Menu
}>()
interface EmitProps {
  (e: 'handleMenuClick', index: string): void
}

// 抛出事件
const emit = defineEmits<EmitProps>()

// 按钮点击事件
const handleBtnClick = (sign: string) => {
  emit('handleMenuClick', sign)
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
